<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的购物车</title>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            font-size:15px ;
            font-family: "黑体";
        }
        ul li{
            list-style: none;
        }
        ul li a{
            text-decoration: none;
        }
        #contain{
            width: 1920px;
        }
        #banner{
            width: 1920px;
            height: 40px;
            background: #0aa885;


        }
        #content{
            width: 1250px;
            margin: 0px auto;
        }

        .banner1{
            width: 1250px;
            height: 40px;
            margin: 0px auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .banner2{
            width: 162px;
            height: 25px;


        }
        .banner3{
            width: 864px;
            height: 25px;

        }
        .content1{
            width: 1250px;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .logo{
            width: 270px;
            height: 80px;
            font-size: 25px;

        }
        .logo a{
            text-decoration: none;
            color: black;
            position: relative;
            bottom: 15px;
        }

        .content2{
            width: 1250px;
            height: 60px;
            background: lightgoldenrodyellow;
            display: flex;
            align-items: center;
            border: 1px solid yellow;

        }
        .content3{
            width: 1250px;
        }

        .banner2 ul li{
            float: left;

        }
        .banner2 ul li a:hover{
            color: red;
        }
        .banner2 ul li a{
            color: white;
        }
        .banner2 ul{
            margin-top:5px ;
        }
        .banner3 ul li{
            float: left;
        }
        .banner3 ul{
            margin-left: 300px;
            margin-top: 5px;
            color: white;
        }
        .banner3 ul li a:hover{
            color: red;
        }
        .banner3 ul li a{
            color:white;
        }

        button:hover{
            background-color:#c81623 ;
        }
        .dl{
            width: 700px;
            height: 32px;
            margin-left: 50px;
        }
        .dl1{
            width: 73px;
            height: 30px;
            background: #C81623;
        }
        .dl1:hover{
            color: red;
        }
        .dl ul li{
            float: left;
        }

        .denglu{
            font-size: 20px;
            color: darkorange;

        }
        .fourzt ul li{
            float: left;
            font-size:20px ;
            color: black;
        }
        .bt1 ul li a:hover{
            color: red;
        }
        .bt1 ul li a{
            color:white ;
            font-size: 16px;
            margin-top: 10px;
        }
        .bt1 ul li{
            padding-top: 5px;
        }
        h2{
            color: white;
        }
        .bt2 ul li a:hover{
            color: red;
        }
        .bt2 ul li a{
            color:white ;
            font-size: 16px;
            margin-top: 10px;
        }
        .bt2 ul li{
            padding-top: 5px;
        }
        .bt3 ul li a:hover{
            color: red;
        }
        .bt3 ul li a{
            color:white ;
            font-size: 16px;
            margin-top: 10px;
        }
        .bt3 ul li{
            padding-top: 5px;
        }
        .bt4 ul li a:hover{
            color: red;
        }
        .bt4 ul li a{
            color:white ;
            font-size: 16px;
            margin-top: 10px;
        }
        .bt4 ul li{
            padding-top: 5px;
        }
        .bt5 ul li a:hover{
            color: red;
        }
        .bt5 ul li a{
            color:white ;
            font-size: 16px;
            margin-top: 10px;
        }
        .bt5 ul li{
            padding-top: 5px;
        }
        .dbdht ul li{
            float: left;
            margin-top: 10px;
            margin-left:5px ;
        }
        .dbdht ul li a:hover{
            color: red;
        }
        .dbdht ul li a{
            color: white;
            font-size: 15px;
        }
        span{
            color: grey;
        }
        .dbdht1 ul li{
            float: left;
            margin-top:5px ;
            color: grey;
            padding-right: 5px;
        }
        .dbdht1 ul li a{
            color: grey;
        }
        .dbdht1 ul li a:hover{
            color: red;
        }
        .dbdht2 ul li{
            float: left;
            margin-top:5px ;
            color: grey;
            padding-right: 5px;
        }
        .dbdht2 ul li a{
            color: grey;
        }
        .dbdht2 ul li a:hover{
            color: red;
        }
        .dbdht3 ul li{
            float: left;
            padding-right: 5px;
            color: grey;
            margin-top: 5px;
        }
        .dbdht3 ul li a{
            color: grey;
        }
        .dbdht3 ul li a:hover{
            color: red;
        }
        .dbdht3 ul li p{
            margin-top: -2px;
        }
        .dbdht5 ul li{
            float: left;
            padding-right: 5px;
            color: grey;
            margin-top: 5px;
        }
        .dbdht5 ul li a{
            color: grey;
        }
        .dbdht5 ul li a:hover{
            color: red;
        }
        .dbdht5 ul{
            margin-left:150px;
        }
        .dbdht6 ul li{
            float: left;
        }

        h3{
            margin-top: 10px;
            padding-left:10px ;
            padding-right: 10px;
        }
        .sp a{
            color: red;
            font-size: 20px;
            text-decoration: none;

        }
        .sp em{
            font-style:normal ;
            display: block;
            line-height:40px ;
        }
        .sp1 hr{
            border-bottom:1px solid red ;
            margin-top: 8px;
        }
        .dq ul li{
            float: left;
            font-size: 18px;

        }

        .jdsp{
            width: 1250px;
            height: 53px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .operationbox{
            width: 1250px;
            height: 52px;
            display: flex;
            align-items: center;
            background: lightgrey;
        }

        .phonebox1{
            width: 1250px;
            height: 272px;

            border:2px solid ;
            border-color:grey mintcream mintcream mintcream;
            display: flex;
            align-items: center;

        }

        .Bottombox{
            width: 1250px;
            height: 69px;
            border: 1px solid white;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .allshopping{
            width: 110px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
        }
        .allshopping ul li{
            color: red;
        }
        .underscorecharacter{
            margin-top:4px ;
            border-color: red;
        }
        em,i,u{
            font-style: normal;
        }

        .fourzt ul li{
            font-size: 25px;
            color: #000000;
        }
        .region{
            width: 260px;
            height: 40px;
            font-size: 15px;
            margin-top: 10px;
            line-height: 30px;

        }
        .region ul li{
            float: left;
        }
        .area{
            width: 190px;
            height: 31px;
        }
        .allcheck{
            text-align: center;
            width: 133px;
            height: 32px;
            line-height: 25px;
        }
        .shopping{
            width: 208px;
            height: 32px;
            line-height: 27px;
            text-align: center;
        }
        .nullbox{
            width: 300px;
            height: 32px;
        }
        .unitprice{
            width: 160px;
            height: 32px;
            text-align: right;
            line-height: 25px;
        }
        .amount{
            width: 140px;
            height: 32px;
            text-align: center;
            line-height: 25px;
        }
        .subtotal{
            width: 140px;
            height: 32px;
            text-align: right;
            line-height:25px ;
        }
        .system{
            width: 75px;
            height: 32px;
            line-height: 25px;
            text-align: right;
        }
        .check{
            width: 16px;
            height: 100px;
            text-align: right;
            margin-left: 40px;
        }
        .phonepicture{
            width: 142px;
            height: 100px;
            text-align: center;
        }
        a{
            text-decoration: none;
            color: black;
        }
        a:hover{
            color: red;
        }
        .phoneinformation{
            width: 300px;
            height: 100px;
            text-align: center;
        }
        .phonechoose{
            width: 250px;
            height: 100px;
        }
        .price{
            width: 100px;
            height: 100px;
        }
        .number{
            width: 180px;
            height: 100px;

        }
        .total{
            width:98px ;
            height: 100px;
        }
        .opreate{
            height: 100px;
        }
        .bottombox{
            width: 343px;
            height: 27px;
            text-align: center;
        }
        .bottombox ul li{
            float: left;
            padding-left: 5px;
            padding-top: 5px;
        }
        .bottombox ul{
            margin-left: 43px;
        }
        .rightbottombox{
            width: 490px;
            height: 68px;
            display: flex;
        }
        .select{
            height: 69px;
        }
        .bottomprice{
            margin-left: 20px;
            font-size: 30px;
            color: grey;

        }
        .bottomprice span{
            color: red;
        }
        .settlement button{
            position: relative;
            left: 5px;
            margin-left:10px;
            padding:20px;
            padding-left:20px;
            width:120px;
            background:#409EFF;
            font-size:18px;
            font-weight: 800;
            color:#FFF

        }

        #goodlist li{
            float: left;
            width: 280px;
            height: 360px;
            border: 1px dashed #CACACA;
            margin-top: 5px;
        }

        #goodlist{
            width: 2260px;
            height: 400px;
            border: 1px dashed #cacaca;
            position: absolute;
            margin-top: 2px;
        }
        #guessyoulike .left,#guessyoulike .right{
            position: absolute;
            width: 40px;
            height: 100px;
            line-height: 100px;
            background-color: lightgray;
            top: 100px;
            font-size: 40px;
            display: none;
        }
        #guessyoulike .left{
            left: 0;
        }
        #guessyoulike  .right{
            right: 0;
            text-align: center;

        }


    </style>
</head>
<body>
<div id="contain">
    <div id="banner">
        <div class="banner1">
            <div class="banner2">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><i class="fa fa-map-marker" aria-hidden="true"></i></li>
                    <li>
                        <option>河南</option>
                    </li>
                </ul>
            </div>
            <div class="banner3">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">我的臻城</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
                    <li><span>|</span></li>
                    <li><a href="#">臻城会员</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">企业采购</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
                    <li><span>|</span>
                    <li>
                    <li><a href="#">客户服务</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
                    <li><span>|</span></li>
                    <li><a href="#">网站导航</a></li>
                    <li><span>|</span>
                    <li>
                    <li><a href="#">手机臻城</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="content">
        <div class="content1">
            <div class="logo"><img src="img/sompic/shopping.jpg"><a href="#">购物车</a></div>
            <div class="from">
                <input type="text"placeholder="请输入您要搜索的内容"><button>搜索</button>
            </div>
        </div>
        <div class="content2">
            <div class="dl">
                <ul>
                    <li class="denglu">你还没有登录!请登录后购物车的商品将保存到你的账号中</li>
                    <li><button class="dl1"><i>立即登录</i></button></li>
                </ul>
            </div>
        </div>
        <div class="content3" id="jd_cart">
            <div class="jdsp">
                <div class="allshopping">
                    <ul>
                        <li><em>全部商品</em></li>
                        <li>
                            <hr class="underscorecharacter" />
                        </li>
                    </ul>
                </div>
                <div class="region">
                    <ul>
                        <li>配送至:</li>
                        <li>
                            <select class="area">
                                <option>河南省郑州市高新区</option>
                            </select>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="operationbox">
                <div class="allcheck">
                    <input type="checkbox" checked id="checkAll" />全选
                </div>
                <div class="shopping">商品</div>
                <div class="nullbox"></div>
                <div class="unitprice">单价</div>
                <div class="amount">数量</div>
                <div class="subtotal">小计</div>
                <div class="system">操作</div>
            </div>
        </div>
        <div id="content5">
            <div class="phonebox1">
                <div class="check"><input type="checkbox" checked class="checkAll" /></div>
                <div class="phonepicture"><img src="img/sompic/111.png" width="100%"></div>
                <div class="phoneinformation"><a href="#">小米10 Pro 双模5G手机【下单送豪</br> &ensp; 礼】骁龙865 新品游戏手机小米10pro</a></div>
                <div class="phonechoose" title="珍珠白">珍珠白 8+258GB</br>官方标配</div>
                <div class="price">￥4699.00</div>
                <div class="number">
                    <button οnclick="calc(this)">-</button>
                    <span> 1 </span>
                    <button οnclick="calc(this)">+</button>
                </div>
                <div class="total">￥4699.00</div>
                <div class="opreate"><a href="#">删除</a></div>
            </div>

        <div class="Bottombox">
            <div class="bottombox">
                <ul>
                    <li><input type="checkbox" checked class="checkAll">全选</li>
                    <li><a href="#">删除选中商品</a></li>
                    <li><a href="#">移到关注</a></li>
                    <li><a href="#">清理购物车</a></li>
                </ul>    
            </div>
            <div class="rightbottombox">
                <div class="select">
                    已选择<span>1</span>件商品<i class="fa fa-angle-down" aria-hidden="true"></i>
                </div>
                <div class="bottomprice">
                    总价:<span>￥4699.00</span>
                </div>
                <div class="settlement">
                  <button>去结算</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
<script type="text/javascript">
    autoMove();

    //添加商品到购物车
    //1.自动生成商品列表
    //商品数据
    var goodsArr = [{
        imgUrl: "img/phone.jpg",
        name: "华为(HUAWEI)荣耀9Play3",
        price: "868"
    }];
    //把以上商品放入ul列表
    //获取存放的商品ul
    var goodlist = document.getElementById("goodlist");
    //遍历数组通过函数来进行处理
    //创建li
    goodsArr.forEach(function(el, idx) {
        var li = document.createElement("li");
        goodlist.appendChild(li);
        //创建li中的内容
        var htmlStr = "<div><img src='" + el.imgUrl + "'></div>"
        htmlStr += "<div>" + el.name + "</div>";
        htmlStr += "<div>&yen;" + el.price + "</div>";
        htmlStr += "<div οnclick='addCart(" + idx + ")'><a href='#'>添加到购物车</a></div>";
        li.innerHTML = htmlStr;
    })

    //实现商品到购物车
    function addCart(i) {
        //一.如果添加的商品已经在购物车存在，则在数量上增加即可
        //通过要添加的商品名称与购物车商品名称对比
        //如果有相同的名称，则表示此商品已经添加过
        //(1)获取购物车中所有的商品名称
        //(a)获取content5所有行
        var content5 = document.getElementById("content5");
        var alldiv = content5.children;
        //console.log(alldiv);
        //(b)获取所有商品名称
        var allGoodsNameArr = [];
        for (var k = 0; k < alldiv.length; k++) {
            //console.log(k);
            //console.log(alldiv[k]);
            allGoodsNameArr.push(alldiv[k].children[2].innerText);
            //console.log(alldiv[k].children.length);
        }
        //(2)查找要添加的商品名称是否存在于购物车
        var index = allGoodsNameArr.findIndex(function(v) {
            return v == goodsArr[i].name;
        }); //返回-1,表示在数组中不存在要比较的对象
        if (index != -1) { //如果添加的商品已经存在于购物车中
            //获取已添加商品中所在盒子中的数量加1
            var n = alldiv[index].getElementsByTagName("span")[0].innerText;
            n++;
            alldiv[index].getElementsByTagName("span")[0].innerText = n;
            //更新小计 单价*数量
            var price = alldiv[index].getElementsByClassName('price')[0].innerText.substr(1);
            console.log(price);
            alldiv[index].getElementsByClassName('total')[0].innerHTML = "&yen;" + n * price;

            //更新总计
            total();
            return; //不再执行下面的代码，即购物车中不再添加新行
        }
        var content5 = document.getElementById("content5");
        var newDiv = document.createElement("div");
        var phonebox1 = newDiv.classList.add("phonebox1");
        content5.appendChild(newDiv);
        //二.如果购物车没有此商品，则商品添加此商品到购物车中

        var newDiv1 = document.createElement("div");
        newDiv.appendChild(newDiv1);
        var check = newDiv1.classList.add("check");
        var newCheckbox = document.createElement("input");
        newCheckbox.setAttribute("type", "checkbox");
        newCheckbox.setAttribute("checked", true);
        newDiv1.appendChild(newCheckbox);

        console.log(allCheckbox.length);
        var arr = Array.from(allCheckbox);
        checkAll.checked = arr.every(function(v) {
            return v.checked;
        });
        //实现复选功能
        newCheckbox.onchange = function() {
            // var arr = Array.from(allCheckbox);
            //只要数组中元素的checked值有一个为假，every函数的返回值为假
            checkAll.checked = arr.every(function(v) {
                return v.checked;
            });
            total();
        }
        //放入图片
        var newDiv2 = document.createElement("div");
        newDiv.appendChild(newDiv2);
        var phonepicture = document.createElement("img");
        newDiv2.appendChild(phonepicture);
        phonepicture.src = goodsArr[i].imgUrl;
        phonepicture.width = 104;
        phonepicture.height = 104;
        newDiv2.className = 'phonepicture1';
        //放入商品名称
        var newDiv3 = document.createElement("div");
        newDiv.appendChild(newDiv3);
        var phoneinformation = document.createElement("a");
        phoneinformation.setAttribute("href", "#");
        newDiv3.appendChild(phoneinformation);
        phoneinformation.innerText = goodsArr[i].name;
        phoneinformation.width = 300;
        phoneinformation.height = 100;
        newDiv3.className = 'phoneinformation';
        //放入一个空盒子
        var newDiv4 = document.createElement("div");
        newDiv4.className = 'phonechoose1';
        newDiv.appendChild(newDiv4);
        //放入单价
        var newDiv5 = document.createElement("div");
        newDiv5.className = 'price';
        newDiv.appendChild(newDiv5);
        newDiv5.innerHTML = "&yen;" + goodsArr[i].price;
        //放入数量
        var newDiv6 = document.createElement("div");
        newDiv6.className = 'number';
        newDiv.appendChild(newDiv6);
        newDiv6.innerHTML = '<button οnclick="calc(this)">-</button><span> 1 </span><button οnclick="calc(this)">+</button>';
        //放入小计
        var newDiv7 = document.createElement("div");
        newDiv7.className = 'total';
        newDiv.appendChild(newDiv7);
        newDiv7.innerHTML = "&yen;" + goodsArr[i].price;
        total();
        //删除操作
        var newDiv8 = document.createElement("div");
        newDiv8.className = 'opreate';
        newDiv.appendChild(newDiv8);
        newDiv8.innerHTML = "<a href='#'>删除</a>";
        newDiv8.getElementsByTagName('a')[0].onclick = function() {
            this.parentNode.parentNode.remove(); //删除行
            total();

            var arr = Array.from(allCheckbox);
            //只要数组中元素的checked值有一个为假，every函数的返回值为假
            checkAll.checked = arr.every(function(v) {
                return v.checked;
            });
            //删除全部商品后全选按钮不再被选中
            if (allCheckbox.length === 0) {
                checkAll.checked = false;
            }
        };


    }
    //删除
    var content5 = document.getElementById("content5");
    var allA = content5.getElementsByTagName("a"); //拿到所有a
    //console.log(allA);
    for (var i = 1; i < allA.length; i += 2) { //遍历奇数a
        allA[i].onclick = function() {
            this.parentNode.parentNode.remove(); //删除整个盒子
            total(); //重新总计
            //由每一个盒子复选框状态决定全选按钮状态
            //把复选框集合转成数组
            var arr = Array.from(allCheckbox);
            //只要数组中元素的checked值有一个为假，every函数的返回值为假
            checkAll.checked = arr.every(function(v) {
                return v.checked;
            });
            //删除全部商品后全选按钮不再被选中
            if (allCheckbox.length === 0) {
                checkAll.checked = false;
            }
        }
    }
    //获取全选按钮复选框
    var checkAll = document.getElementById("checkAll");

    var content5 = document.getElementById("content5");
    var allCheckbox = content5.getElementsByTagName("input"); //获取盒子中所有的复选框
    console.log(allCheckbox.length);
    for (var i = 0; i < allCheckbox.length; i++) {
        allCheckbox[i].onchange = function() {
            total();
            //由每一个盒子复选框状态决定全选按钮状态
            //把复选框集合转成数组
            var arr = Array.from(allCheckbox);
            //只要数组中元素的checked值有一个为假，every函数的返回值为假
            checkAll.checked = arr.every(function(v) {
                return v.checked;
            }); //对数组里每个元素进行遍历
        }
    }

    //全选和全不选功能实现
    checkAll.onchange = function() {
        for (var i = 0; i < allCheckbox.length; i++) {
            allCheckbox[i].checked = checkAll.checked;
        }
        total();
    }
    //*****************01
    function total() {
        //三.总计
        var content5 = document.getElementById("content5");
        var alldiv = content5.children;
        var allCheckbox = content5.getElementsByTagName("input"); //获取盒子中所有的复选框
        //console.log(allCheckbox);
        var total = 0;
        for (var i = 0; i < alldiv.length; i++) {
            //累加复选框选中的盒子进行小计
            if (allCheckbox[i].checked) { //复选框选中状态
                total += parseFloat(alldiv[i].children[6].innerText.substr(1));
            }
        }
        //console.log(total);
        //找到最后一个总计
        var content = document.getElementById("content");
        var Bottombox = content.getElementsByClassName("Bottombox")[0];
        var rightbottombox = Bottombox.getElementsByClassName("rightbottombox")[0];
        var bottomprice = rightbottombox.getElementsByClassName("bottomprice")[0];
        //console.log(bottomprice);
        bottomprice.innerHTML = "总价" + "&yen;" + total.toFixed(2);
    }

    function calc(btn) {
        //一.数量增减
        var div = btn.parentNode;
        var spanArr = div.getElementsByTagName("span");
        var span = spanArr[0];
        var n = parseInt(span.innerText);
        if (btn.innerText == '-') {
            n--;
            if (n < 1) {
                n = 1;
            }
        } else {
            n++;
        }
        span.innerText = n;
        //二.小计
        var pricediv = div.previousElementSibling;
        var price = pricediv.innerText.substr(1);
        var sumdiv = div.nextElementSibling;
        sumdiv.innerHTML = "&yen;" + price * n;
        total();
    }
</script>
</html>



